<template>
  <layout title="actionSheet操作菜单">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="basicActionSheet = true">弹出ActionSheet</options-list>
    </layout-content>

    <layout-content title="带标题操作菜单">
      <options-list icon="menu" @click="titleActionSheet = true">带标题</options-list>
    </layout-content>

    <layout-content title="隐藏关闭按钮">
      <options-list icon="menu" @click="hiddenCloseActionSheet = true">隐藏关闭按钮</options-list>
    </layout-content>
  </layout>

  <tn-action-sheet v-model="basicActionSheet" :data="basicActionSheetData"></tn-action-sheet>
  <tn-action-sheet v-model="titleActionSheet" :data="titleActionSheetData">
    <template v-slot:header>
      <view class="tn-color-gray tn-text-sm">退出后不会删除用户数据, 以便于下次登录查阅消息</view>
    </template>
  </tn-action-sheet>
  <tn-action-sheet v-model="hiddenCloseActionSheet" :data="hiddenCloseActionSheetData">
    <template v-slot:header>
      <view class="tn-color-gray tn-text-sm">选择性别</view>
    </template>
  </tn-action-sheet>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnActionSheet from '@/tuniao-ui/components/tn-action-sheet/src/ActionSheet.vue'
import { ActionSheetData } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// actionsheet数据
const basicActionSheetData: ActionSheetData[] = [
  { value: 0, content: '点赞' },
  { value: 1, content: '评论', disabled: true },
  { value: 2, content: '收藏' }
]
let basicActionSheet = ref<boolean>(false)

const titleActionSheetData: ActionSheetData[] = [
  { value: 0, content: '退出登录', color: '#E83A30' },
  { value: 1, content: '切换账号', color: '#01BEFF' }
]
let titleActionSheet = ref<boolean>(false)

const hiddenCloseActionSheetData: ActionSheetData[] = [
  { value: 0, content: '男' },
  { value: 1, content: '女' },
  { value: -1, content: '未知', subContent: '保密选项' },
]
let hiddenCloseActionSheet = ref<boolean>(false)
</script>

<style lang="scss" scoped>
</style>
